<template>
    <div>
        <h2>门店增加</h2>
        <table class="table table-bordered">
           <tbody>
            <tr>
                <td align="right">门店名称</td>
                <td><input type="text"  v-model="queryInfo.shopName"></td>
            </tr>
            <tr>
                <td align="right">分店名称</td>
                <td><input type="text" v-model="queryInfo.shopFen"></td>
            </tr>
            <tr>
                <td align="right">门店地址</td>
                <td><input type="text" v-model="queryInfo.addres"></td>
            </tr>
            <tr>
                <td align="right">门店状态</td>
                <td>
                    <input type="radio" name="state"  v-model="queryInfo.start" :value="1">是
                    <input type="radio" name="status" :value="0"  v-model="queryInfo.start">否
                </td>
            </tr>
            <tr>
                <td align="right">门店电话</td>
                <td><input type="text" v-model="queryInfo.phone" maxlength="11"/></td>

            </tr>
            <tr>
                <td align="right">门店特色</td>
                <td>
                    <select v-model="queryInfo.teseId">
                        <option value="">请选择</option>
                        <option v-for="item in teselist" :key="item.id" :value="item.id">{{item.teseName}}</option>
                     
                    </select>
                </td>

            </tr>
            <tr>
                <td  align="right">门店图片</td>
                <td>
                    <input type="file" @change="getphoto"/>
                    <img :src="queryInfo.photo" v-if="queryInfo.photo!=''" alt="" width="100px" height="100px">
                </td>

            </tr>
            <tr>
                <td  align="right">门店介绍</td>
                <td>
                    <textarea  id="" cols="50" rows="5"  v-model="queryInfo.desc"></textarea>
                </td>

            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="提交" @click="ok" class="btn btn-success  "/></td>

            </tr>
           </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { reactive,ref,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();
let queryInfo= reactive({
   
  shopName: "",
  shopFen: "",
  phone: "",
  addres: "",
  start: 1,
  photo: "",
  desc: "",
  teseId: '',
 
})
//上传图片
const getphoto = (e:any) => {
    if(queryInfo.shopName == ""){
        alert("请先填写门店名称");
        return;
    }
    let reg=/^[\u4e00-\u9fa5]{1,20}$/;
    if(!reg.test(queryInfo.shopName)==false){
        alert("门店名称是20以内的汉字");
        return;
    }
    if(queryInfo.shopFen == ""){
        alert("请先填写门店分店");
        return;
    }
    if(queryInfo.phone == ""){
        alert("请先填写门店电话");
        return;
    }
    let reg1=/^1[3456789]\d{9}$/;
    if(!reg1.test(queryInfo.phone)){
        alert("请输入正确的手机号");
        return;
    }
    if(queryInfo.addres == ""){
        alert("请先填写门店地址");
        return;
    }
    if(queryInfo.desc == ""){
        alert("请先填写门店介绍");
    }
    let reg2=/^1[3-9]\d{9}$/;
    if(!reg2.test(queryInfo.phone)){
        alert("请输入正确的手机号码");
        return;
    }
    // if(queryInfo.photo==""){
    //     alert("请先上传图片");
    //     return;
    // }
    if(queryInfo.teseId==""){
        alert("门店特色不能为空");
        return;
    }
    if(queryInfo.desc.length>20){
        alert("门店介绍不能超过20个字");
        return;
    }
    if(queryInfo.photo=='不是图片'){
        alert('上传的图片格式不对');
        return;
    }
    if(queryInfo.photo=='大于2M'){
        alert('上传的图片不能大于2M');
        return;
    }
    console.log(e);
    let obj= e.target.files[0];
    let f=new FormData();
    f.append("file",obj);
    axios({
        url:'/api/Img/GetPhoto',
        method:'post',
        data:f
    })
    .then(res => {
        console.log(res.data);
        queryInfo.photo = res.data;
    })
    .catch(err => {
        console.log(err);
    })
}
//特色下拉列表
let teselist:any = ref([]);
onMounted(() => {
    getShopTese();
})
const getShopTese = () => {
    axios({
        url:'/api/Shops/GetShopTese',
        method:'get'
    })
    .then(res => {
        console.log(res.data);
        teselist.value = res.data;
    })
    .catch(err => {
        console.log(err);
    })
}
const ok = () => {
    axios({
        url:'/api/Shops/AddShop',
        method:'post',
        data:queryInfo
    })
    .then(res => {
        console.log(res.data);
        if(res.data>0){
            alert("添加成功");
            router.push("/shoplist");
        }else{
            alert("添加失败");
        }
    })
    .catch(err => {
        console.log(err);
    })
}
</script>

<style scoped>

</style>